
/**
 * 全局头部导航组件的业务逻辑和样式配置
 * 
 * 该文件包含：
 * 1. 菜单状态管理逻辑
 * 2. 路由跳转处理函数
 * 3. 菜单项配置数据
 * 4. CSS样式定义
 * 
 * @author 瑞云图库
 * @description 全局头部导航栏的核心逻辑文件
 */

import type { CSSProperties } from 'vue';
import { h, ref } from 'vue'
import { HomeOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

/**
 * 获取当前选中的菜单项
 * @returns 当前选中的菜单项数组
 */
const current = ref(['home'])
export const useCurrent = () => {
  // 返回固定的选中菜单项

  return current
}

/**
 * 菜单点击处理逻辑
 * @returns 包含菜单点击处理函数的对象
 */
export const useMenuClick = () => {
  // 获取路由实例
  const router = useRouter()
  
  /**
   * 处理菜单项点击事件
   * @param key - 菜单项的路由路径
   */
  const doMenuClick = ({ key }: { key: string }) => {

    router.afterEach((to, from, next) => {
    current.value = [to.path];
    });
    // 跳转到对应路由
    router.push(key)
    console.log('点击了菜单项：', key)
    console.log('当前路由：', router.currentRoute.value.path)
    
    console.log(current.value)
  }
  
  return { doMenuClick }
}

/**
 * 获取菜单项配置
 * @returns 包含菜单项配置的响应式对象
 */
export const useMenuItems = () => {
  // 菜单项配置数组
  const items = ref([
    {
      key: '/',
      icon: () => h(HomeOutlined), // 主页图标
      label: '主页',
      title: '主页',
    },
    {
      key: '/admin/userManage',
      label: '用户管理',
      title: '用户管理',
    },
    {
      key: '/about',
      label: '关于',
      title: '关于',
    },
    {
      key: 'others',
      // 外部链接，在新标签页打开
      label: h('a', { href: 'https://www.codefather.cn', target: '_blank' }, '编程导航'),
      title: '编程导航',
    },
  ])
  
  return { items }
}

// ==================== CSS 样式配置 ====================

/**
 * 标题文字样式
 */
export const htitle: CSSProperties = {
    color: 'black',        // 文字颜色为黑色
    fontSize: '18px',      // 字体大小18px
    marginLeft: '16px',    // 左边距16px
};

/**
 * Logo图片样式
 */
export const logo: CSSProperties = {
    height: '48px',        // 高度48px
};

/**
 * 标题栏容器样式
 */
export const titleBar: CSSProperties = {
    display: 'flex',       // 弹性布局
    alignItems: 'center',  // 垂直居中对齐
};

